<template>
  <div class="border-right">
    <div class="lineheight36 flex justify-between">
      <div class="left-font">组织结构</div>
      <div class="right-font" @click="handlebatchex"><el-button v-preventReClick type="text">批量导入</el-button></div>
    </div>
    <div class="margin-top-xs">
      <el-input v-model="deptName" placeholder="请输入组织名称">
        <i class="el-icon-search el-input__icon" slot="suffix" @click="search"></i>
      </el-input>
    </div>
    <div class="margin-top-xs">
      <el-tree
        :data="deptOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        default-expand-all
        highlight-current
        @node-click="handleNodeClick"
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">   
        <!-- <el-tooltip   placement="bottom" effect="light" 
          style="overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          white-space: nowrap;
          max-width: calc(100% - 15px);">
          <div  slot="content">{{ `${node.label}` }}</div>
          <span >{{ node.label }}</span>
        </el-tooltip>   -->
        <span v-cusTooltip="node.label" 
        style="overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          white-space: nowrap;
          max-width: calc(100% - 15px);
          "
          >{{ node.label }}</span> 
        <el-dropdown style="right:0;position: absolute;"  @command="handleCommand(data,node,$event)">
        <!-- <span  class="el-dropdown-link" >...</span> -->
        <!-- transform: rotate(90deg); -->
        <i class="el-icon-more" style="transform: rotate(90deg)"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">新建下级组织</el-dropdown-item>
          <el-dropdown-item command="b">查看</el-dropdown-item>
          <el-dropdown-item command="c">编辑</el-dropdown-item>
          <el-dropdown-item v-if="data.treeSort != 0||data.treeSort != 1" command="d">删除</el-dropdown-item>
          <el-dropdown-item v-if="data.treeSort != 0||data.treeSort != 1" command="e">移动至</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
      </span> 
      </el-tree>
    </div>

  </div>
</template>
<script>
import { listSimpleDepts } from "@/api/system/dept";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name"
      },
      newsort:0,//当前点击树节点在同层的sort
      // 部门名称
      deptName: undefined,
      // 部门树选项
      deptOptions: undefined,
      showTooltip: true
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      console.log(val);
      this.$refs.tree.filter(val);
    },
    
  },
  methods: {
  
    //查询
    search() {},
    /** 查询部门下拉树结构 + 岗位下拉 */
    getTreeselect() {
      listSimpleDepts().then(response => {
        console.log(response.data,'response.data-数数--查询--')
        response.data.forEach((item,index) => {
          Object.assign(item,{sort:index})
        })
        // 处理 deptOptions 参数
        this.deptOptions = [];
        this.deptOptions.push(...this.handleTree(response.data, "id"));
        console.log(this.deptOptions,response.data,'response.data---');
        if(this.deptOptions.length  == 0)return
        this.$emit("emitParentGlobalThis", this.deptOptions[0].id);
      });

    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // tree
    handleNodeClick(node,data,self) {
      console.log(data,'7700',node,self)
      if(node.treeSort!=0){
        this.$emit("emitParentGlobalThis", node.id,data);
      }else{
        this.$emit("emitParentGlobalThis", node.id,data,false);
      }
    },
    //树节点选择的事件
    handleCommand(data,node,command) {
      console.log(data,'node--7-',node,'node---',command)
      let bro = this.getBrotherNodes(this.deptOptions,data.id).length+1
      console.log(bro,'braoth')
      this.$emit("updateSure", data,node,command,bro,this.newsort);
    },
     //查找当前数节点有几个兄弟节点，以及当前节点的sort
    getBrotherNodes(list, id) {
      for(let i in list) {
        if(list[i].id === id) {
          this.newsort = ++i
          console.log(i,'最后的i',this.newsort)
          return list.filter(v => v.id !== id)
        }
        if(list[i].children?.length > 0) {
          let node = this.getBrotherNodes(list[i].children, id)
          if(node) 
          return node.filter(v => v.id!= id)   
        }
      }
    },
    // 格式化部门的下拉框
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    //批量导入组织
    handlebatchex() {
        this.$store.dispatch('uploads/SETOPEN',true)
        this.$store.dispatch('uploads/SETTYPE',1)
        this.$store.dispatch('uploads/SETACTIVE',0)
        this.$store.dispatch('uploads/SETTITLE','批量导入组织')
    }
  },
  created() {
    this.getTreeselect();
  }
};
</script>
<style scoped>
.lineheight36 {
  line-height: 36px;
}
.left-font {
  font-size: 16px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 500;
}
.right-font {
  font-size: 12px;
  color: #1257ff;
  letter-spacing: 0;
  font-weight: 400;
}
</style>